/* eslint-disable no-console */
import { Map, APILoader, AutoComplete, Marker } from '@uiw/react-amap';
import { Card } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import styles from './MapForm.less';

interface MapFormProps {
  lat: string;
  lng: string;
  setLocation: Function;
}

const MapForm: React.FC<MapFormProps> = (props) => {
  const { lat, lng, setLocation } = props;
  const mapRef = useRef();
  const [data, setData] = useState<any>({});
  const [input, setInput] = useState();
  useEffect(() => {
    setInput(mapRef.current);
  }, [lat, lng]);

  return (
    <APILoader akay="3673e3250fdffb2c0d6481856970c64c">
      <Card key={lat + lng} className={styles.Card}>
        <>
          <div className={styles.Content}>
            <input type="text" ref={mapRef as any} className={styles.mapInput} />
            {/* <Button className={styles.Btn} type="primary" onClick={() => setLocation(data?.poi?.location?.lng, data?.poi?.location?.lat)}>确定</Button> */}
          </div>
          <div style={{ width: '100%' }}>
                {input && (
                <AutoComplete
                    input={input}
                    onSelect={(opts: any) => {
                    setData(opts);
                    const name = opts?.poi?.district + opts?.poi?.name;
                    console.log('@@@@', opts);
                    setLocation(opts?.poi?.location?.lng, opts?.poi?.location?.lat, name);
                    }}
                />
                )}
            </div>
          <div style={{ width: '100%', height: '300px' }}>
            <Map 
                center={[lng, lat]}>
              <Marker position={new AMap.LngLat(Number(lng), Number(lat), false)}></Marker>
            </Map>
          </div>
        </>
      </Card>
    </APILoader>
  );
};

export default MapForm;
